<template>
	<div class="footer">
		<input type="checkbox"/>&nbsp;&nbsp;全选&nbsp;&nbsp;&nbsp;合计:&nbsp;<h4>￥0.00</h4>
		<button >去结算</button>
	</div>
</template>

<script>
export default {
	name:'MobileFooter'
}
</script>

<style scoped>
.footer{
	width: 100%;
	line-height: 3rem;
	background-color: white;
	position: fixed;
	bottom: 0;
	display: flex;
}
.footer input[type="checkbox"]{
	margin-top: 0.8rem;
	margin-left: 0.8rem;
	appearance: none;/* 取消默认的复选框样式 */
	/* 重新写一个复选框圆角样式 */
	width: 20px;/* 设置方形宽度为20px */
	height: 20px;/* 设置方形高度为20px */
	border: 1px solid #aaaaaa;/* 设置边框样式 */
	border-radius: 50%;/* 将方形的边框改为圆形 */
}
.footer input[type="checkbox"]:checked{
	background-image: url('../../../assets/img/login/R-C.png');/* 复选框选中后添加背景图片 */
	background-repeat: no-repeat;/* 取消背景图片平铺 */
	background-size: 27px 27px;/* 背景图片大小,第一个27px表示width宽度,第二个27px表示height高度 */
	background-position: center;/* 表示背景图片居中对齐 */
}
.footer button{
	width: 8rem;
	height: 2.5rem;
	color: white;
	background-color: red;
	line-height: 1rem;
	margin-left: 4.8rem;
	border: none;
	border-radius: 10px;
	margin-top: 0.25rem;
}
</style>
